<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * RepairsView.vue
-->
<template>
  <div>
    <div class="title">故障报修列表</div>
    <Table   ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params,StateList,TypeList }">
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="关键字">
            <el-input style="width:150px" v-model="params.key" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="地址">
            <el-input style="width:150px" v-model="params.address" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input style="width:150px" v-model="params.tel" placeholder="请输入房间号" clearable />
          </el-form-item>
          <el-form-item label="时间查询">
            <el-date-picker v-model="params.houseno" @change="(e: any) => dateChange(e, params)" value-format="YYYY-MM-DD"
              type="daterange" range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期" />
          </el-form-item>
          <el-form-item label="报修状态">
            <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">

              <el-option v-for="item in StateList" :key="item.id" :label="item.name" :value="item.id"  />
            </el-select>
          </el-form-item>
          <el-form-item label="报修类型">
            <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择状态">
              <el-option v-for="item in TypeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="居民">
            <el-input style="width:150px" v-model="params.userid" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #buttons="{ deleteAllHandle }">
        <el-button class="del" @click="deleteAllHandle" type="danger">删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>
  </div>
</template>
<script lang='ts' setup>
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './Repairs'
import { ref } from 'vue'


//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();
const dateChange = (e: any, params: any) => {
  if (e == null) {
    params.begindate = null;
    params.enddate = null;
  }
  else {
    params.begindate = e[0];
    params.enddate = e[1];
  }
}



</script>
<style scoped lang="less">
@import url(../../assets/styles/repairs/Repairs.css);
</style>